<template>
  <div class="show">
    <div class="word_msg">
      <div class="type_num"><i class="el-icon-s-goods"></i>&#12288商品总数&#12288<span style="color:green">{{ goods_type_num }}</span></div>
      <div class="order_num"><i class="el-icon-s-order"></i>&#12288订单总数&#12288<span style="color:blue">{{ order_num }}</span></div>
      <div class="total_price"><i class="el-icon-s-finance"></i>&#12288总销售额&#12288<span style="color:rgb(169, 52, 72)">{{ total_price }}</span></div>
    </div>
    <div ref="chart" class="type_chart" style="width:50%;height:376px"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    name:'MainPage',
    data(){
        return{
          myCharts:'',
        }
    },
    methods:{
      // 绘制echarts图
      setChart(){
        // 基于准备好的dom，初始化echarts实例
        this.myChart = echarts.init(this.$refs.chart);
        // 绘制图表
        this.myChart.setOption(this.options);
      },
    },
    computed:{
      // 得到商品总数
      goods_type_num(){
        return this.$store.state.goods.goods.length
      },
      // 得到订单总数
      order_num(){
        return this.$store.state.goods.orders.length
      },
      // 总销售额
      total_price(){
        // 判断订单是否支付
        // 得到支付的订单 newOrder
        let newOrder = this.$store.state.goods.orders.filter(item=>item.payStatus==1)
        // 支付则将支付订单的价格相加 得到总销售额
        let total_price = newOrder.reduce((pre,item)=>{return pre+item.order_price},0)
        return total_price
      },
      // echarts数据信息
      options(){
        let that = this;
        return{
          title: {
            text: '商品分类比例'
          },
          series:[
            {
              type: 'pie',
              data: [
                {
                  value: that.$store.state.goods.goods.filter(item=>item.type=='faceWash').length,
                  name: '洗面奶'
                },
                {
                  value: that.$store.state.goods.goods.filter(item=>item.type=='makeUpWL').length,
                  name: '水乳'
                },
                {
                  value: that.$store.state.goods.goods.filter(item=>item.type=='cream').length,
                  name: '面霜'
                },
                {
                  value:that.$store.state.goods.goods.filter(item=>item.type=='essence').length,
                  name:'精华'
                }
              ]
            }
          ]
        }
      }
  },
    mounted(){
      // 绘制饼图
      this.setChart(),
      // 得到所有商品
      this.$store.dispatch('getGoods')
      // 得到所有订单
      this.$store.dispatch('getOrder')
    }
  }

</script>

<style lang='less' scoped>
  .show{
    display: flex;
    justify-content: space-around;
    .word_msg{
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    .type_num{
      width:200px;
    }
    .order_num{
      width:200px;
    }
    .total_price{
      width:200px;
    }
    
  }
  .type_chart{
    }
  }
</style>